<template>
  <div class="lng-padding top-search">
    <flexbox>
      <flexbox-item>
        <popup-picker :data="list" v-model="value" @on-show="onShow" @on-hide="onHide" show-name
                      @on-change="onChange" placeholder="请选择统计类别"></popup-picker>

      </flexbox-item>
      <flexbox-item>
        <div class="blue-button" @click="toggle()">
          <i class="icon icon-search"></i>
          条件查询
        </div>
      </flexbox-item>
    </flexbox>
  </div>
</template>
<script>
  import {PopupPicker, Flexbox, Picker, FlexboxItem, Icon} from 'vux'

  export default {
    components: {
      Picker,
      PopupPicker,
      Flexbox,
      Icon,
      FlexboxItem
    },
    data () {
      return {
        value: [],
        list: [[{
          name: '同比环比',
          value: '1'
        }, {
          name: '地域环比',
          value: '2'
        }, {
          name: '经济效益热力图',
          value: '3'
        }, {
          name: '效益分析报表',
          value: '4'
        }, {
          name: '报警统计',
          value: '5'
        }, {
          name: '站点分布统计',
          value: '6'
        }, {
          name: '待更换设备统计',
          value: '7'
        }, {
          name: '气站储量统计',
          value: '8'
        }, {
          name: '气站消耗统计',
          value: '9'
        }]],
      }
    },
    methods: {
      toggle(){
        this.$emit('on-toggle-search')
      },
      onChange (val) {
        console.log('val change', val)
      },
      onShow () {
        console.log('on show')
      },
      onHide (type) {
        console.log('on hide', type)
      }
    }
  }
</script>

<style scoped>
  .vux-cell-box:before {
    border: none;
    height: 0;
  }

  .lng-padding {
    padding: 4px 15px;
  }

  .blue-button {
    float: right;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
  }

  .vux-x-icon {
    width: .4rem;
    height: .4rem;
    vertical-align: middle;
    color: #4791d2;
  }

</style>
<style>
  .top-search .weui-cell {
    padding: 5px 8px;
    border: 1px solid #C7C7C7;
    border-radius: 4px;
    font-size: 14px;
  }
</style>
